<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--
     th:replace="common/commHeader :: commHeader(~{::title})"
    -->
    <title>用户首页</title>
    <script src="/mes/static/js/vue.js"></script>
    <!--ajax方式请求后台-->
    <script src="/mes/static/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/mes/static/js/index.css">
    <!-- 引入组件库 -->
    <script src="/mes/static/js/index.js"></script>
    <!--JQuery-->
    <script src="/mes/static/js/jquery-3.3.1.min.js"></script>
    <script src="/mes/static/js/echarts.js"></script>
</head>


<style type="text/css">
    body {
        width: 100%;
        padding: 0;
        margin: 0;
        min-width: 1280px;
        min-height: 800px;
        background: #009688;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        height:100%;
    }
    .el-menu {

        border-right: solid 0px #e6e6e6;
    }

    #index {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #all {
        height:100vh;
    }
    iframe {
        border: 0px;
        height:100%;
    }

    .header {
        height: 70px;
        line-height: 70px;
        background:#08122D;
        color: #fff;

    }

    .userinfo {
        text-align: right;
        float: right;
    }

    .userinfo-inner {
        cursor: pointer;
        color: #fff;
    }
    .el-submenu__title:hover{
        background-color:  #009688;
    }
    .el-menu-item{
        background-color: #0A0132;
        color:white;
    }
    .el-menu-item:focus{
        background-color:#009688;
        color:white;
    }

    .el-menu-item:hover {
        background-color: #009688;
    }
    .el-submenu__title i {
        color:#008000;
    }
    .el-menu-item.is-active {
        color: white;
    }
</style>
<body>
<div id="index">
    <!--修改密码界面-->
    <el-dialog title="更改密码" :visible.sync="dialogFormVisible">
        <el-form :model="form" status-icon :rules="rules2" ref="form" label-width="100px" class="demo-ruleForm">
            <span class="demonstration" style="font-size:15px;padding: 0 0 0 70px">用户名: {{loginname}}</span>
            <el-form-item label="请输入原始密码密码" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="输入新的密码" prop="pass">
                <el-input type="password" v-model="form.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="再次确认密码" prop="checkPass">
                <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updatePw" >确 定</el-button>
        </div>
    </el-dialog>
    <el-container id="all">
    <!--顶部-->
    <el-header style="height:70px;line-height: 70px" class="header">
            <el-col :span="3" class="logo" :class="'logo-width'">
               <span> <img src="/mes/static/image/viewfile.png"/></span>

            </el-col>
            <el-col :span="6">
                <span style="font-size: 25px;font-weight: bold">工业4.0柔性管理系统</span>
            </el-col>
            <el-col :span="2">
                <div class="tools" @click.prevent="collapse">
                    <i class="fa fa-align-justify"></i>
                </div>
            </el-col>
            <el-col :span="5" type="flex" justify="end" class="userinfo">
                <div id="nowtime" style="display: inline-block">当前时间</div>
                <el-dropdown trigger="hover">
                    <span v-model="loginname" class="el-dropdown-link userinfo-inner">
                                  你好！  {{loginname}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <a href="/">首页</a>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <a @click="dialogFormVisible = true">修改密码</a>
                        </el-dropdown-item>
                        <el-dropdown-item >
                            <span @click="logout">
                                注销登录
                            </span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
    </el-header>
    <el-container>
        <!--左侧-->
        <el-aside style="width: 211px;min-width: 211px;">
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                     :collapse="isCollapse" unique-opened=true style="background-color: #08122D">
                <label v-for="(tree,index) in menuTree" :key="tree.id">
                    <el-submenu v-if="tree.pid==null" :index="tree.id"  >
                        <template slot="title">
                            <!--图标-->
                            <i :class="tree.iconCls"></i>
                            <!--节点名称-->

                            <span slot="title" style="color:white">{{tree.text}}</span>
                        </template>
                        <label v-for="(subtree,index) in menuTree" :key="subtree.id">
                            <el-menu-item @click="changeMain(subtree.attributes)" v-if="subtree.pid==tree.id"
                                          :index="subtree.id">{{subtree.text}}
                            </el-menu-item>
                        </label>
                    </el-submenu>
                </label>
            </el-menu>
        </el-aside>
        <el-main style="padding: 10px;height: 100%">
            <!--右侧-->
            <iframe :src="url" WIDTH="100%" height="100%" style="background-color: white"></iframe>
        </el-main>

    </el-container>
    </el-container>
</div>
<script>
    var vm = new Vue({
        el: "#index",
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form.checkPass !== '') {
                        this.$refs.form.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
            dialogFormVisible: false,
            form: {
                password: '',
                pass: '',
                checkPass: ''
            },
            formLabelWidth: '120px',
            loginname: '',
            height:{
                height:''
            },
            isCollapse: false,
            menuTree: [],
            url: '/mes/achievement/view',
            rules2: {
                pass: [
                    {validator: validatePass, trigger: 'blur'}
                ],
                checkPass: [
                    {validator: validatePass2, trigger: 'blur'}
                ],
            },
            }

        },
        created:function() {
            this.loadingData();
            this.hh();
        },
        methods: {
            hh:function(){
                this.height.height=window.innerHeight-60+'px';
            },
            loadingData: function () {
                var url = "/mes/power/showAllResources";
                axios.post(url).then(function (response) {
                    console.log(response)
                    console.info(response.data);
                    vm.menuTree = response.data;
                    console.info(vm.menuTree);
                });
                axios.post("/mes/log/getLogin").then(function (response) {
                   vm.loginname=response.data;
                })
            },
            error:function() {
                this.$message.error('请确认重复密码相同');
            },
            error2:function() {
                this.$message.error('请输入原始密码');
            },
            updatePw:function(){
                this.form.dialogFormVisible=false;
                if(this.form.password==''){
                    this.error2()
                }else {
                if(this.form.pass!='' && this.form.pass==this.form.checkPass){
                    axios.post("/mes/log/updatePw",this.form).then(function (response) {
                                if(response.data.retStatus==0){
                                    vm.success(response.data.message)
                                    axios.post("/mes/log/logout",this.form).then(function (response) {
                                           window.location.href="/mes/log/login"
                                    })
                                }else{
                                    vm.warning(response.data.message)
                                }
                    })
                }else{
                    this.error()
                }
                }

            },
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            success:function(msg) {
                this.$message({
                    message:msg,
                    type: 'success'
                });
            },
            warning:function(msg) {
                this.$message({
                    message:msg,
                    type: 'warning'
                });
            },


            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            },
            toggleSideBar:function() {
                this.$store.dispatch('ToggleSideBar')
            },
            logout:function() {
                axios.post("/mes/log/logout").then(function (response) {
                    window.location.href="/mes/log/login"
                })
            },
            changeMain: function (url) {
                console.info(url);
                vm.url = url;

            }
        }

    })

</script>
<script language="javascript" type="text/javascript" src="http://ip.ws.126.net/ipquery"></script>
<script>
    $("#myCity").val(localAddress.city.replace('市',''));
</script>
<script>
    //页面加载调用
    window.onload=function(){
        //每1秒刷新时间
        setInterval("NowTime()",1000);
    }
    function NowTime(){
        //获取年月日
        var time=new Date();
        var year=time.getFullYear();
        var month=time.getMonth()+1;
        var day=time.getDate();

        //获取时分秒
        var h=time.getHours();
        var m=time.getMinutes();
        var s=time.getSeconds();

        //检查是否小于10
        h=check(h);
        m=check(m);
        s=check(s);
        document.getElementById("nowtime").innerHTML="当前时间："+year+"年"+month+"月"+day+"日  "+h+":"+m+":"+s;
    }
    //时间数字小于10，则在之前加个“0”补位。
    function check(i){
        //方法一，用三元运算符
        var num;
        i<10?num="0"+i:num=i;
        return num;

        //方法二，if语句判断
        //if(i<10){
        //    i="0"+i;
        //}
        //return i;
    }
</script>
</body>
</html>